<!-- 壁纸 -->
<div class="card glass-card mt-4">
    <div class="card-header bg-dark text-white d-flex align-items-center">
        <h5 class="card-title mb-0">
            <i class="fas fa-image me-2"></i>&ensp;壁纸
        </h5>
        <input type="file" id="bg-upload" accept="image/*" style="display: none;">
        <span type="button" id="bg-upload-btn" title="📌 最多保留最新的5张图片，且单张图片大小不超过20MB，过大可能会影响页面渲染效率" class="badge badge-primary" style="position: absolute; right: 10px;">上传壁纸</span>
    </div>
    <div id="wallpaperCarouse" class="carousel slide carousel-fade shadow-lg" data-ride="carousel">
        <!-- 正确的资源位置：主题资源应该放在 themes/WebStack-Hugo/assets/ 目录，项目资源应该放在项目根目录的 assets/ 目录-->
        <!-- 资源管道规则：resources.Match 只能用于 assets/ 目录下的内容，static/ 目录下的文件不会被资源管道处理-->
        <!-- 主题资源优先级：主题的 assets/ 会覆盖主项目的 assets/，推荐将主题专属资源放在主题目录下-->
        {{ $uploadBgPath := printf "%s*" $.Site.Params.media.images.backgrounds.uploadBg }}
        {{ $bgImages := resources.Match $uploadBgPath }}
        {{ $bgCount := len $bgImages }}
        {{ $medianIndex := div $bgCount 2 }}
        <ol class="carousel-indicators">
            <li class="first-image" data-target="#wallpaperCarouse" data-slide-to="0"></li>
            <li class="middle-image" data-target="#wallpaperCarouse" data-slide-to="{{ $medianIndex }}"></li>
            <li class="last-image" data-target="#wallpaperCarouse" data-slide-to="{{ sub $bgCount 1 }}"></li>
        </ol>
        <div class="carousel-inner rounded-3">
            {{ with $bgImages }}
                {{ range $index, $img := $bgImages }}
                    <div class="system-control carousel-item" data-interval="10000">
                        <span class="control-type badge badge-pill badge-secondary" style="position: absolute; top: 10px; left: 10px; z-index: 10">系统内置</span>
                        <img
                            src="{{ $img.RelPermalink }}"
                            class="d-block"
                            alt="系统内置背景{{ add $index 1 }}"
                            style="width: 370px; height: 210px;"
                            onerror="handleImageError(this)"
                        >
                    </div>
                {{ end }}
            {{ end }}
        </div>
        <button class="carousel-control-prev" type="button" data-target="#wallpaperCarouse" data-slide="prev">
            <span class="carousel-control-prev-icon"></span>
            <span class="sr-only sr-only-focusable">上一页</span>
        </button>
        <button class="carousel-control-next" type="button" data-target="#wallpaperCarouse" data-slide="next">
            <span class="carousel-control-next-icon"></span>
            <span class="sr-only sr-only-focusable">下一页</span>
        </button>
    </div>
    <div class="mt-2 d-flex justify-content-center">
        <div class="mb-1 mr-3">
            <button type="button" class="delete-bg-btn btn btn-outline-secondary" title="📌 仅支持删除用户上传的壁纸">删除当前壁纸</button>
        </div>
        <div class="mb-1">
            <button type="button" class="set-bg-btn btn btn-outline-primary">设置为默认背景</button>
        </div>
    </div>
    <div class="card-body">
        <div class="form-label d-flex align-items-center mb-3">
            <label class="flex-grow-1" for="autoSwitchWallpaper">
                定时切换
            </label>
            <input type="checkbox" id="autoSwitchWallpaper" name="autoSwitchWallpaper" data-size="small" data-on-color="success" data-off-color="info" data-on-text="开启" data-off-text="关闭">
        </div>
        <div class="mt-4">
            <div class="mb-3">
                <label for="switchInterval" class="form-label d-flex" style="font-size: 14px;">
                    <span title="📌 定时切换启用时可调">切换间隔（分钟）</span>
                </label>
                <input type="range" class="form-range" id="switchInterval" name="switchInterval" min="3" max="120" value="60" style="width: 80%">
                <span id="switchIntervalValue" class="badge" style="font-size: 15px; font-weight: normal">60</span>
            </div>
        </div>
        <div class="mt-4">
            <div class="mb-3">
                <label for="maskOpacity" class="form-label d-flex" style="font-size: 14px;">
                    <span>遮罩浓度</span>
                </label>
                <input type="range" class="form-range" id="maskOpacity" name="maskOpacity" min="0" max="100" value="0" style="width: 80%">
                <span id="maskOpacityValue" class="badge" style="font-size: 15px; font-weight: normal">0%</span>
            </div>
            <div class="mb-3">
                <label for="blurIntensity" class="form-label d-flex" style="font-size: 14px;">
                    <span>模糊度</span>
                </label>
                <input type="range" class="form-range" id="blurIntensity" name="blurIntensity" min="0" max="100" value="0" style="width: 80%">
                <span id="blurIntensityValue" class="badge" style="font-size: 15px; font-weight: normal">0%</span>
            </div>
        </div>
    </div>
</div>
<!-- 壁纸 end -->